<template>
    <div class="all_card">
        <el-card class="box-card">
            <template #header>
                <div class="card-header" style="display: flex; align-items: center; justify-content: space-between;">
                    <span>岗位管理</span>
                    <el-button type="primary" @click="add_gangwei">新增岗位</el-button>
                </div>
            </template>
                <div class="biaoge">
                    <el-table :data="job_data_params" border style="width: 100%">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="name" label="岗位名称"  />
                        <el-table-column prop="job_sort" label="排序号"  />
                        <el-table-column prop="enabled" label="状态"  />
                        <el-table-column  label="操作" >
                            <template #default="scoped">
                                <el-button type="primary" :icon="Edit" @click="bianji_job(scoped.row)" circle />
                                <el-button type="danger" :icon="Delete" @click="delete_iob(scoped.row)" circle />
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
        </el-card>
    </div>
    <div class="all_tanchuang">
        <el-dialog
            v-model="dialogVisible"
            title="提示"
            width="40%"
            :before-close="handleClose"
        >
            <template #footer>
                <span class="dialog-footer">
                    <div class="shuru">
                        <el-input v-model="pull_job_data.name" placeholder="岗位名称" />
                    </div>
                    <div class="shuru">
                        <el-input v-model="pull_job_data.job_sort" placeholder="排序" />
                    </div>
                    <div class="danxuan" >
                        <el-radio-group v-model="pull_job_data.enabled" size="large">
                            <el-radio-button label="禁用" />
                            <el-radio-button label="正常" />
                        </el-radio-group>
                    </div>  
                    <div class="anniu">
                        <el-button @click="dianjiquxiao">取消</el-button>
                        <el-button type="primary" @click="add_job">确定</el-button>
                    </div>    
                    
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="position">
import {ref} from 'vue'
import {all_list_job,add_one_job,put_one_job,delete_job} from '@/apis/job'
import { Edit, Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const job_data_params = ref()
const dialogVisible = ref(false)
const pull_job_data = ref({
    name:'',
    enabled:'正常',
    job_sort:''
})

const is_edit = ref(0)
const scoped_id = ref(0)
const add_gangwei = () => {
    dialogVisible.value = true
}

const get_job_list = async() => {
    let res = await all_list_job()
    console.log("job_list:::", res.result)
    job_data_params.value = res.result
}
const dianjiquxiao = () => {
    dialogVisible.value = false
}
const handleClose = () => {
    pull_job_data.value.enabled = '正常'
    pull_job_data.value.name = ''
    pull_job_data.value.job_sort = ''
    is_edit.value = 0
    scoped_id.value = 0
}

const add_job = async() => {
    if(pull_job_data.value.enabled == '正常'){
        pull_job_data.value.enabled = true
    }else{
        pull_job_data.value.enabled = false
    }
    if(is_edit == 0){
        let res = await add_one_job(pull_job_data.value)
        ElMessage.success('新增成功')
    }else{
        await put_one_job(scoped_id.value,pull_job_data.value)
        ElMessage.success('编辑成功')
    }
    get_job_list()
}
const bianji_job = async(scoped) => {
    is_edit.value = 1
    scoped_id.value = scoped.id
    console.log("scoped",scoped)
    dialogVisible.value = true
    if(scoped.enabled == true){
        pull_job_data.value.enabled = '正常'
    }else{
        pull_job_data.value.enabled = '禁用'
    }
    pull_job_data.value.name = scoped.name
    pull_job_data.value.job_sort = scoped.job_sort
   
    get_job_list()
}

const delete_iob = async(data) => {
    let params = []
    params.push(data.id)
    await delete_job(params)
    ElMessage.success('删除成功')
    get_job_list()
}

get_job_list()
</script>

<style lang="scss" scoped>
.all_card{
    .box-card{
        .card-header{
            height: 100%;
        }
        .biaoge{
            height: 100%;
        }
    }
}
.all_tanchuang{
    .dialog-footer{
        display: flex;
        flex-direction: column;
        align-items: normal;
        gap: 10px;
        .danxuan{
            display: flex;
            align-items: flex-start;
        }
        .anniu{
            padding-left: 10px;
            padding-right: 50px;
        }
    }
}
</style>